<script lang="ts" setup>
import system, {ArticlePath} from "~/config/SystemConfig";
import {getRandomArticle} from "~/server/article.service";
import {useAppStore} from "~/stores/appStore";
import type {WebsiteConfigDTO} from "~/interface/WebsiteConfigDTO";


const randomList = ref({} as randomListType)
let webConfig = ref({} as WebsiteConfigDTO)
const homeThank = ref(system.thank)
const appStore = useAppStore()

interface randomListType {
  id: number,
  articleTitle: string,
  articleCover: string,
  articleAbstract: string,
  createTime: any
}

async function randomArticle(): Promise<void> {
  const params = {size: 3}
  await getRandomArticle(params).then(({data}: any) => {
    if (data.flag) {
      randomList.value = data.data
    }
  })
}

function site(): void {
  webConfig = computed(() => {
    return appStore.websiteConfig
  })
}

onMounted(() => {
  randomArticle()
  site()
  createTextEffect('#thanks', 'text-effect', '1s', 0.1);
})
watch(randomList, () => {
  nextTick(() => {
    randomPos('ul.rand-mask')
  })
})
</script>
<template>
  <section class='full index-one' id='notice'>
    <!-- 欢迎语 -->
    <div class='welcome-word'>
      <h6 class='greets'>你好，欢迎来到{{ webConfig.name }}</h6>
      <div class='thanks' id='thanks' :style="'--count:' + homeThank.length">{{ homeThank }}</div>
    </div>
    <div class='rand-post'>
      <ul class='rand-mask'>
        <li style='--star-top:8' v-for='(item,index) in randomList' :key='index'>
          <a :href="ArticlePath.Path+item.id" class='star'></a>
          <a :href="ArticlePath.Path+item.id" class='post'>
            <time>发现{{ item.createTime }}年回忆</time>
            <span>{{ item.articleTitle }}</span>
          </a>
        </li>
      </ul>
    </div>
  </section>
</template>
<style scoped>
@import "@/static/css/home/index-one.css";
</style>
